<template>
	<view class="container">
		<u-navbar style="position: fixed;z-index: 20;" :is-back="false" :is-fixed="true" :background="{ backgroundImage: 'linear-gradient(180deg,rgba(237,79,93,1) 0%,rgba(251,122,142,1) 100%)' }"  title-color="#fff">
			<view class="slot-wrap">
				<image @tap.stop="toPage" data-url="/pageTip/index/submit" class="dynamic-entry-icon" src="@/static/images/icon/icon-dynamic-entry.png" mode="aspectFit"></image>
				<u-tabs-swiper class="tabs-swiper" :bar-style="barStyle" bg-color="rgba(255, 255, 255, 0)" @change="tabsChange" :current="tabCurrentIndex" height="85" font-size="28" active-color="#ffffff" inactive-color="#ffffff" ref="uTabs" :list="tabList" :is-scroll="false"></u-tabs-swiper>
			</view>
		</u-navbar>
		<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" top="44px" :topbar="true">
			<view id="scrollTop"></view>
			<template v-if="tabCurrentIndex == 0">
				<block v-for="item in linesList" :key="item.moment_id" :id="'momentId-' + item.moment_id">
					<moment-card :moment-object="item" @del="onDel"></moment-card>
				</block>
			</template>
			<template v-if="tabCurrentIndex == 1">
				<block v-for="item in nearbyList" :key="item.moment_id" :id="'momentId-' + item.moment_id">
					<moment-card :moment-object="item" @del="onDel"></moment-card>
				</block>
			</template>
		</mescroll-body>
	</view>
</template>

<script>
import momentCard from '@/components/custom/moment-card.vue';
// 引入mescroll-mixins.js
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
export default {
	mixins: [MescrollMixin],
	components: { momentCard },
	data() {
		return {
			barStyle: {
				bottom: '10rpx',
				background: '#ffffff',
				borderRadius: '2rpx'
			},
			tabList: [
				{
					name: '关注'
				},
				{
					name: '附近'
				}
			],

			windowHeight: null,
			tabCurrentIndex: 0,
			swiperCurrentIndex: 0,
			scrollTop: null,
			linesList: [],
			nearbyList: []
		};
	},
	onLoad() {
		const systemInfo = uni.getSystemInfoSync();
		this.windowHeight = systemInfo.windowHeight;
		this.swperHeight = this.windowHeight - 44 - uni.upx2px(85) - systemInfo.safeArea.top;
		this.scrollTop = 44 + uni.upx2px(85);
		uni.$on('openCommentPopup', this.getCloseCommentPopupToken);
	},
	onUnload() {
		uni.$off('openCommentPopup', this.getCloseCommentPopupToken);
	},
	onShow() {},
	methods: {
		getCloseCommentPopupToken(data) {
			const keyboardHeight = data.keyboardHeight;
			const id = 'momentCardBottom-' + data.momentId;
			const query = uni.createSelectorQuery().in(this);
			this.$nextTick(() => {
				query
					.select('#' + id)
					.boundingClientRect(data => {
						setTimeout(() => {
							uni.pageScrollTo({
								scrollTop: this.mescroll.getScrollTop() + uni.getSystemInfoSync().screenHeight + data.top,
								duration: 0,
								fail: e => {
									console.log(e);
								}
							});
						}, 1000);
					})
					.exec();
			});
		},
		tabsChange(index) {
			this.tabCurrentIndex = index;
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			});
			this.mescroll.resetUpScroll(false);
		},
		swiperTransition(e) {
			let dx = e.detail.dx;
			this.$refs.uTabs.setDx(dx);
		},
		swiperAnimationfinish(e) {
			let current = e.detail.current;
			this.$refs.uTabs.setFinishCurrent(current);
			this.swiperCurrentIndex = current;
			this.tabCurrentIndex = current;
		},
		downCallback(mescroll) {
			uni.getLocation({
				success: res => {
					if (res.errMsg == 'getLocation:ok') {
						this.$u.api.updateLngLat(res.longitude, res.latitude).then(res => {
							this.mescroll.resetUpScroll(true);
						});
					} else {
						this.mescroll.resetUpScroll(true);
					}
				},
				fail: () => {
					this.mescroll.resetUpScroll(true);
				}
			});
		},
		upCallback(mescroll) {
			if (!this.isLogin()) {
				this.mescroll.endBySize(0, 0);
				return false;
			}
			if (this.tabCurrentIndex == 0) {
				this.$u.api.getMomentLines(mescroll.num).then(res => {
					let list = res.data.list.data;
					for (let i = 0; i < list.length; i++) {
						list = list.map(item => {
							return { ...item, ...item.moment };
						});
					}
					if (mescroll.num == 1) {
						this.linesList = list;
					} else {
						this.linesList.push(...list);
					}
					this.mescroll.endBySize(list.length, res.data.total);
				});
			} else {
				this.$u.api.getMomentNearby(mescroll.num).then(res => {
					let data = res.data.result;
					if (mescroll.num == 1) {
						this.nearbyList = data.list;
					} else {
						this.nearbyList.push(...data.list);
					}
					this.mescroll.endByPage(data.list.length, data.total_page);
				});
			}
		},
		onDel() {
			this.mescroll.resetUpScroll(true);
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	/deep/.u-navbar-inner {
		margin-right: 0 !important;
	}
}

.find-page-item {
	width: 750rpx;
	position: relative;
}
.tabs-swiper {
	background-color: inherit;
	width: 400rpx;
}
.slot-wrap {
	display: flex;
	align-items: center;
	flex: 1;
	justify-content: center;
	.dynamic-entry-icon {
		width: 45rpx;
		height: 45rpx;
		position: absolute;
		/* #ifdef MP */
		left: 34rpx;
		/* #endif */
		/* #ifndef MP */
		right: 34rpx;
		/* #endif */
		top: 50%;
		margin-top: -22.5rpx;
	}
}
.moment-card-bottom {
	height: 0rpx;
	width: 750rpx;
}
</style>
